import React, { useEffect, useRef } from "react";
import { useGLTF } from "@react-three/drei";
import * as Three from "three";
import {
  OrbitControls,
  Environment,
  OrbitControlsProps,
} from "@react-three/drei";
import { useThree, useFrame } from "@react-three/fiber";
import { useTexture, useCubeTexture } from "@react-three/drei";

const backgrounds = [
  "/right.jpg",
  "/left.jpg",
  "/top.jpg",
  "/bottom.jpg",
  "/front.jpg",
  "/back.jpg",
];
const controls: OrbitControlsProps = {
  // 使动画循环使用时阻尼或自转 意思是否有惯性
  enableDamping: true,
  //动态阻尼系数 就是鼠标拖拽旋转灵敏度
  //controls.dampingFactor = 0.25;
  //是否可以缩放
  enableZoom: true,

  //设置相机距离原点的最远距离
  minDistance: 1,
  //设置相机距离原点的最远距离
  maxDistance: 200,
  //是否开启右键拖拽
  enablePan: false,
};
export function Scene({ frameCallBack }: { frameCallBack: () => void }) {
  let { scene, camera } = useThree();

  const skyBox = useCubeTexture(backgrounds, { path: "/skybox" });
  scene.background = skyBox;
  useFrame(frameCallBack);
  useEffect(() => {
    camera.position.set(
      7.624838982278368,
      -4.180032578588708,
      55.030762871208715
    );
  }, []);
  return (
    <>
      <OrbitControls {...controls}></OrbitControls>
      <ambientLight></ambientLight>
      <pointLight
        color={new Three.Color("green")}
        castShadow
        position={new Three.Vector3(80, 100, 50)}
      ></pointLight>
    </>
  );
}
